<template>
  <el-menu  align="left"
           class="el-menu-vertical-demo" router=true>
    <el-submenu v-show="!collapse" v-for="(lv1,key1,index1) in url_bars" :index="index1+''" :key="index1">
      <template slot="title">
        <i class="el-icon-caret-right"></i>
        <span>
            {{key1}}
          </span>
      </template>
      <el-submenu :index="index1+'-'+index2"
                  v-for="(lv2,key2,index2) in lv1" :key="index1+'-'+index2">
        <template slot="title">
          <span><i class="el-icon-d-arrow-right"></i>{{key2}}</span>
        </template>
        <el-menu-item :index="'/doc/?url='+lv3"
                      v-for="(lv3,index3) in lv2" :key="index1+'-'+index2+'-'+index3">
          <i class="el-icon-star-on"></i>
          {{lv3}}
        </el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item v-show="collapse" index="'/sql/'+lv1" v-for="lv1 in sql_table_names" :key="lv1.key">
      {{lv1}}
    </el-menu-item>
  </el-menu>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Aside',
  props: {
    collapse: Boolean, // false -> api 界面 ,true -> 数据库界面
  },
  data() {
    return {
      url_bars: {},
      sql_table_names: [],
    };
  },
  created() {
    this.update_me();
  },
  methods:
      {
        update_me() {
          const self = this;
          axios.get('/api/common/urls').then((res) => {
            self.url_bars = res.data;
          });
          axios.get('/api/sql/list').then((res) => {
            self.sql_table_names = res.data;
          });
        },
      },
  watch: {
    '$store.state.data_iterable': function () {
      this.update_me();
    },
  },
};
</script>

<style scoped>

</style>
